<template>
  <div class="group-detail">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <div class="title">
            <el-button icon="Back" @click="handleBack">返回</el-button>
            <span class="group-name">{{ groupInfo.name }}</span>
          </div>
          <el-button type="primary" @click="handleAddStudent">添加学生</el-button>
        </div>
      </template>

      <DataTable
        :data="studentsData"
        :columns="columns"
        :pagination="pagination"
        v-loading="loading"
        @update:pagination="handlePaginationChange"
      >
        <template #status="{ row }">
          <el-tag :type="row.status === 'active' ? 'success' : 'info'">
            {{ row.status === 'active' ? '正常' : '停用' }}
          </el-tag>
        </template>
        
        <template #actions="{ row }">
          <!-- <el-button link type="primary" @click="handleEdit(row)">编辑</el-button> -->
          <el-button link type="danger" @click="handleRemove(row)">移出小组</el-button>
        </template>
      </DataTable>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import DataTable from '../../components/common/DataTable.vue'
import { classService } from '../../services/class'
import { ElMessageBox } from 'element-plus'
import { showSuccess, showError } from '../../utils/message'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const groupInfo = ref({})
const studentsData = ref([])

const columns = [
  { prop: 'account', label: '学号', width: '120', align: 'center' },
  { prop: 'name', label: '姓名', width: '120', align: 'center' },
  { prop: 'phone', label: '手机号', align: 'center' },
  { prop: 'status', label: '状态', width: '100', slot: 'status', align: 'center' },
  { label: '操作', width: '200', fixed: 'right', slot: 'actions', align: 'center' }
]

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const loadStudents = async () => {
  try {
    loading.value = true
    const { classId, groupId } = route.params
    const data = await classService.getGroupStudents(classId, groupId)
    
    groupInfo.value = {
      id: data.id,
      name: data.name,
      description: data.description
    }
    
    studentsData.value = data.students || []
    pagination.total = data.students?.length || 0
  } catch (error) {
    showError('加载小组学生失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

const handleBack = () => {
  router.back()
}

const handleAddStudent = () => {
  // TODO: 实现添加学生功能
}

const handleEdit = (row) => {
  // TODO: 实现编辑学生功能
}

const handleRemove = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要将学生"${row.name}"移出小组吗？`,
      '移出确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await classService.removeStudentFromGroup(row.id)
    showSuccess('移出成功')
    loadStudents()
  } catch (error) {
    if (error !== 'cancel') {
      showError('操作失败')
      console.error(error)
    }
  }
}

onMounted(() => {
  loadStudents()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.group-name {
  font-size: 16px;
  font-weight: bold;
}
</style>
